<template>
	<view>
		<uni-popup ref="customer1" type="bottom" class="bg-white">
			<view class="bg-white" style="padding-bottom: 100rpx;">
				<uni-section title="客户详情" type="circle">
					<template v-slot:right>
						<view @click="close">关闭</view>
					</template>
				</uni-section>
				<view class="margin 20rpx 0px ">
					<view class="customerCard">
						<view>
							<image @click="updateStudentImg(customer.student.id,getimg(customer.student))"
								class="uni-image-big" :src="getimg(customer.student)"
								:style="{borderStyle:' solid',borderColor:customer.student.sex==1?'#0057ff':'#ff0070',borderWidth:'4rpx',borderRadius:'50%'}">
							</image>
						</view>
						<view class="customer margin-left-lg" style="width: 550rpx;position: relative;">

							<view class="floating" @click="updateCustomerInfo">
								<uni-icons type="gear" style="font-size: 20px;"></uni-icons>
							</view>
							<view class="top">
								<view class="name">

									<view style="font-size: 34rpx;font-weight: bold;display: flex;">
										{{customer.student.name}}
										<text style="margin-right: 10rpx;color: #f3a73f;font-weight: bold;margin: -8rpx 0px  0px 10rpx;
						font-size: 24rpx;" v-if="customer.isVip==1">
											VIP
										</text>
									</view>
								</view>
							</view>
							<view class="bottom">
								<view class="phone" style="margin-top: 10rpx;font-size: 28rpx;">
									{{customer.parentsInfo.phone}}
								</view>
								<view class="age" style="margin-top: 5rpx;font-size: 24rpx;">
									男&nbsp;&nbsp;|&nbsp;&nbsp;{{dateToAge(customer.student.dateOfBirth)}}&nbsp;&nbsp;|&nbsp;&nbsp;{{customer.student.weight}}kg&nbsp;&nbsp;|&nbsp;&nbsp;{{customer.student.height}}cm
								</view>


								<view style="height: 1px;background-color: #ededed;margin: 20rpx 0px;"></view>

								<view class="age" style="margin-top: 5rpx;display: flex;font-size: 24rpx;">


									来源:{{customer.sourcetitle}}&nbsp;&nbsp;|&nbsp;&nbsp;关系:{{ $getDictNameByValue('relationship', customer.relationship) }}&nbsp;&nbsp;|&nbsp;&nbsp;星级:{{customer.level}}


								</view>

								<view class="age" style="margin-top: 5rpx;display: flex;font-size: 24rpx;">


									<text>
										创建人:{{formatterUserName(customer.createBy)}}
									</text>
									<text style="margin: 0px 10rpx;">|</text>
									<text style="color: #2182ff;" @click="updateCustomerInfo">
										课程顾问:{{formatterUserName(customer.courseConsultantId)}}
									</text>

								</view>

							</view>
						</view>
					</view>
					<view style="height: 1px;background-color: #ededed;margin: 20rpx 0px;"></view>
					<view class="age font-13" style="margin-top: 20rpx;font-size: 24rpx;">
						创建于:{{ customer.createTime }}
					</view>

					<view class="age font-13" style="margin-top: 5rpx;">
						备注:{{ customer.remark }}
					</view>
					<view style="height: 1px;background-color: #ededed;margin: 20rpx 0px;"></view>
					<view class="age" style="margin-top: 5rpx;font-size: 24rpx;">
						<view v-for="item in customer.axCommunicationRecordModel">
							{{ item.createTime.split(" ")[0]+":    "+item.content }}
						</view>
					</view>
					<view style="height: 1px;background-color: #ededed;margin: 20rpx 0px;"></view>
					<!-- 操作 -->
					<view>
						<uni-row class="demo-uni-row" :gutter="20" name="aaa">
							<uni-col :span="8" v-for="item in fildList">
								<view class="demo-uni-col">
									<button class="login-btn cu-btn block  round " style="color: #fff;  background-image: linear-gradient(to bottom, #56e0ff,  #2182ff);box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
" @click="go(item,customer)">{{item.title}}</button>
								</view>
							</uni-col>

						</uni-row>
					</view>
				</view>
			</view>
			<addEvaluation ref="addEvaluation"></addEvaluation>
			<addCustomerInfo ref="addCustomerInfo"></addCustomerInfo>
		</uni-popup>

	</view>
</template>

<script>
	import {
		formatterUserName,
		getcommon
	} from '@/utils/common'
	import addEvaluation from "@/pages/marketing/evaluation/addEvaluation.vue"
	import addCustomerInfo from "@/pages/marketing/customer/addCustomerInfo.vue"
	import {
		pictureProcessing
	} from '@/utils/common.js'
	import {
		dateToAge
	} from '@/utils/validate'

	export default {
		components: {
			addEvaluation,
			addCustomerInfo
		},
		data() {
			return {
				customer: {
					student: {},
					parentsInfo: {}
				},
				fildList: [{
						title: '沟通记录',
						url: '/pages/marketing/communication/index'
					}, {
						title: '邀约到访',
						url: '/pages/evaluation/evaluation'
					}, {
						title: '发起报名',
						url: '/pages/approval/record/addRecord'
					}, {
						title: '合同信息',
						url: '/pages/vip/contract/index',
						isVip: 1
					}, {
						title: '课堂作业',
						url: '/pages/lpc/work/index',
						isVip: 1
					},
					{
						title: '训练计划',
						url: '/pages/lpc/monthlyplan/index',
						isVip: 1
					},

				]
			}
		},
		methods: {
			updateCustomerInfo() {

				this.$refs.addCustomerInfo.open(this.customer)
			},
			open(data) {
				this.customer = data
				this.$refs.customer1.open()

			},
			formatterUserName(cellValue) {
				return formatterUserName(cellValue)
			},
			getimg(data) {
				return pictureProcessing(data)
			},
			dateToAge(date) {
				return dateToAge(date)
			},
			go(item, customer) {
				if (item.title == '邀约到访') {
					this.$refs['addEvaluation'].open(customer)
					return
				}
				this.$tab.navigateTo(item.url + '?customerId=' + customer.id)
			},

			/**
			 * 修改客户头像
			 * @param {Object} id
			 */
			updateStudentImg(id, img) {
				this.$tab.navigateTo('/pages/mine/avatar/index?id=' + id + "&img=" + img)
			}
		}
	}
</script>

<style lang="scss">
	.demo-uni-col {
		padding: 10rpx 0px;
		font-size: 28rpx;
	}

	.customerPopup {
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 100rpx;
	}

	.uni-image-big {
		width: 200rpx;
		height: 200rpx;
		border-style: 2px solid #000
	}

	.customerCard {
		border-radius: $uni-border-radius-lg;
		// height: 140rpx;
		// padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		display: flex;

		.img2 {
			flex: 1;
			width: 140rpx;
			height: 140rpx;
			padding: 10rpx;
			border-radius: $uni-border-radius-circle;
		}

		.img3 {
			flex: 5;
			width: 300rpx;
			height: 300rpx;
			padding: 10rpx;
			border-radius: $uni-border-radius-circle;
		}

		.customerInfo {
			padding: 10rpx;
			flex: 5;
			color: $uni-color-title;
			display: block;

			.top {
				display: flex;

				.name {
					font-size: 30rpx;
					font-weight: bold;
					display: flex;

					.vip {
						margin-right: 10rpx;
						color: #f3a73f;
						font-weight: bold;
						border: 1px solid #f3a73f;
						padding: 0px 5px;
					}

				}


			}


			.bottom {
				.phone {
					margin-top: 20rpx;
					color: #8f8f8f;

				}

				.sex {
					color: #8f8f8f;
				}

				.age {
					// margin-left: 10rpx;
					color: #8f8f8f;
				}


			}
		}
	}

	.floating {
		position: absolute;
		/* 设置为绝对定位 */
		top: -10px;
		/* 距离顶部 0 */
		right: 0;
		/* 距离右侧 0 */
		background-color: rgba(255, 255, 255, 0.8);

	}
</style>